<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" :width="1024" @ok="handleSubmit">
    <a-form ref="formRef" :model="formData" v-bind="formItemLayout" style="height: auto;">
      <a-row>
        <a-col :span="8">
          <a-form-item label="处置人" name="handlePerson">
            <a-input v-model:value="formData.handlePerson" :disabled="true"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="处置日期" name="handleDate">
            <a-date-picker v-model:value="formData.handleDate" value-format="YYYY-MM-DD" style="width: 100%"
              :disabled="true" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="处置交接人" :label-col="{ span: 6 }" :wrapper-col="{ span: 5 }" name="connectPerson">
            <a-input v-model:value="formData.connectPerson" :disabled="true"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item label="备注" name="remark">
            <a-input v-model:value="formData.remark" :disabled="true" style="width: 900px;"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-tabs style="margin-bottom: 3px;">
        <a-tab-pane tab="样品信息">
          <div style="margin-bottom: 3px;">
            <a-row type="flex" style="margin-bottom: 3px;">
              <a-col :span="1" style="text-align: center;">序号</a-col>
              <a-col :span="2" style="text-align: center;">样品类型</a-col>
              <a-col :span="4" style="text-align: center;">样品编号</a-col>
              <a-col :span="4" style="text-align: center;">样品名称</a-col>
              <a-col :span="3" style="text-align: center;">样品外观</a-col>
              <a-col :span="3" style="text-align: center;">回收日期</a-col>
              <a-col :span="3" style="text-align: center;">处理方式</a-col>
              <a-col :span="4" style="text-align: center;">备注</a-col>
            </a-row>

            <a-row type="flex" style="margin-bottom: 3px;height: 30px;" gutter="1px"
              v-for="( sam, index ) in formData.labSampleHandleListList  " :key="index">
              <a-col style="display: none">
                <a-form-item>
                  <a-input placeholder="id" v-model:value="sam.id" />
                  <a-input placeholder="samId" v-model:value="sam.samId" />
                  <a-input placeholder="lotNum" v-model:value="sam.lotNum" />
                  <a-input placeholder="handleId" v-model:value="sam.handleId" />
                </a-form-item>
              </a-col>
              <a-col :span="1" style="width: 40px;">
                <a-form-item>
                  <span>&nbsp;&nbsp;&nbsp;{{ index + 1 }}</span>
                </a-form-item>
              </a-col>
              <a-col :span="2">
                <a-form-item>
                  <a-input v-model:value="sam.samType" style="width: 82px;" :disabled="true" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item>
                  <a-input v-model:value="sam.samNum" style="width: 165px;" :disabled="true" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item>
                  <a-input v-model:value="sam.samName" style="width: 165px;" :disabled="true" />
                </a-form-item>
              </a-col>

              <a-col :span="3">
                <a-form-item>
                  <a-input v-model:value="sam.samAppear" style="width: 123px;" :disabled="true" />
                </a-form-item>
              </a-col>
              <a-col :span="3">
                <a-form-item>
                  <a-input v-model:value="sam.backDate" style="width: 123px;" :disabled="true" />
                </a-form-item>
              </a-col>
              <a-col :span="3">
                <a-form-item>
                  <a-select v-model:value="sam.handleWay" style="width: 123px;" :disabled="true">
                    <a-select-option value="销毁">销毁</a-select-option>
                    <a-select-option value="其他">其他</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item>
                  <a-input v-model:value="sam.remark" style="width: 155px;" :disabled="true" />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-form>
    <template v-slot:footer>
      <a-button type="default" @click="closeModal"> 取消 </a-button>
      <a-button type="danger" @click="showAuditModal('no')">不同意</a-button>
      <a-button type="primary" @click="showAuditModal('yes')">同意</a-button>
    </template>
  </BasicModal>
  <AuditModal @register="regAuditModal" @ok="closeModals"></AuditModal>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, computed, unref } from 'vue';
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { queryLabSampleHandleListByMainId, saveOrUpdate, labSampleList } from '../LabSampleHandle.api';
import AuditModal from "./AuditHandleModal.vue";


export default defineComponent({
  name: 'tableModal',
  components: { BasicModal, AuditModal},
  emits: ['success', 'register'],
  setup(props, { emit }) {
    const isUpdate = ref(true);
    const showFooter = ref(true);
    const rowId = ref('');
    const formRef = ref();
    const disabled = ref(false);
    const formItemLayout = {
      labelCol: { xs: { span: 24 }, sm: { span: 5 } },
      wrapperCol: { xs: { span: 24 }, sm: { span: 16 } },
    };

    const formData = reactive({
      id: '',
      handleDate: '',
      handlePerson: '',
      handleCycle: '',
      handleType: '',
      remark: '',
      auditPerson: '',
      auditTime: '',
      auditCause: '',
      connectPerson: '',
      auditMark: '制单中',
      labSampleHandleListList: [],
    });
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
      setModalProps({ confirmLoading: false });
      isUpdate.value = !!data?.isUpdate;
      disabled.value = data.disabled;
      showFooter.value = data.showFooter;
      reset();
      if (unref(isUpdate.value)) {
        rowId.value = data.record.id;
        Object.assign(formData, data.record);
        formData.labSampleHandleListList = [];
        let id = formData.id;
        formData.labSampleHandleListList = await queryLabSampleHandleListByMainId(id);
      } else {
        formData.labSampleHandleListList = [];
        formData.labSampleHandleListList = (await labSampleList()).records;
      }
    });

    const [regAuditModal, { openModal: openAuditModal, closeModal: closeAuditModal }] = useModal();

    const getTitle = computed(() => (!unref(isUpdate) ? '样品处置' : '样品处置'));

    function reset() {
      formData.id = '';
      formData.handleDate = '';
      formData.handlePerson = '';
      formData.handleCycle = '';
      formData.handleType = '';
      formData.remark = '';
      formData.auditPerson = '';
      formData.auditTime = '';
      formData.auditCause = '';
      formData.connectPerson = '';
      formData.auditMark = '';
      formData.labSampleHandleListList = [];
    }

    //提交表单数据
    async function handleSubmit() {
      formRef.value
        .validate()
        .then(async () => {
          try {
            setModalProps({ confirmLoading: true });
            await saveOrUpdate(formData, unref(isUpdate));
            closeModal();
            emit('success');
          } finally {
            setModalProps({ confirmLoading: false });
          }
        })
        .catch((error: ValidateErrorEntity<any>) => {
          console.log('error', error);
        });
    }

    function showAuditModal(str) {
      openAuditModal(true, { formData, str });
    }

    async function closeModals() {
      //延迟0.5秒关闭弹框
      setTimeout(() => {
        //关闭子modal
        closeAuditModal();
        //关闭父 modal
        closeModal();
        //刷新列表
        emit('success');
      }, 1000)
    }

    return {
      formRef,
      formData,
      getTitle,
      disabled,
      isUpdate,
      showFooter,
      registerModal,
      handleSubmit,
      closeModal,
      formItemLayout,
      regAuditModal,
      openAuditModal,
      closeAuditModal,
      showAuditModal,
      closeModals
    };
  },
});
</script>
<style  lang="less" scoped>
.ant-form-item-label {
  width: 150px;
  /* height: 32px; */
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #727272;
  line-height: 20px;
}

.ant-input {
  width: 220px;
  /* height: 32px; */
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #DDDDDD;
}

.ant-picker {
  width: 220px !important;
  /* height: 32px; */
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #DDDDDD;
}


:deep(.ant-form-item-control-input) {
  width: 220px !important;
}

:deep(.ant-table-title) {
  display: none;
}
</style>
